<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="renderer" content="webkit" />
		<!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>长虹[联合运营平台后台管理系统]</title>
		<!-- 全局CSS 开始-->
		<link href="../css/global/bootstrap.min.css" rel="stylesheet" />
		<link href="../css/global/font-awesome.min.css" rel="stylesheet" />
		<link href="../css/global/simple-line-icons.css" rel="stylesheet" />
		<link href="../css/global/animate.css" rel="stylesheet" />
		<link href="../css/global/style.css" rel="stylesheet" />
		<link href="../js/plugins/pace/pace.css" rel="stylesheet" />
		<!-- 全局CSS 结束-->
		<!-- 页面CSS 开始-->
		<!-- 页面CSS 结束-->
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="../js/bootstrap/html5shiv.min.js"></script>
		<script src="../js/bootstrap/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="wrapper wrapper-content animated fadeInUp">
			<div class="row page-heading">
				<h4><i class="fa fa-flask"></i>  UI组件 / 基本表单</h4>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>默认表单</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content form">
							<form role="form">
								<div class="form-body">
									<div class="form-group">
										<label>Email Address</label>
										<div class="input-group">
											<span class="input-group-addon">
											<i class="fa fa-envelope"></i>
											</span>
											<input type="text" class="form-control input-sm" placeholder="Email Address" />
										</div>
									</div>
									<div class="form-group">
										<label>Circle Input</label>
										<div class="input-group">
											<span class="input-group-addon input-circle-left">
											<i class="fa fa-envelope"></i>
											</span>
											<input type="text" class="form-control input-sm input-circle-right" placeholder="Email Address" />
										</div>
									</div>
									<div class="form-group">
										<label for="exampleInputPassword1">Password</label>
										<div class="input-group">
											<input type="password" class="form-control input-sm" id="exampleInputPassword1" placeholder="Password" />
											<span class="input-group-addon">
											<i class="fa fa-user"></i>
											</span>
										</div>
									</div>
									<div class="form-group">
										<label>Left Icon</label>
										<div class="input-icon">
											<i class="fa fa-bell-o"></i>
											<input type="text" class="form-control input-sm" placeholder="Left icon" />
										</div>
									</div>
									<div class="form-group">
										<label>Right Icon</label>
										<div class="input-icon right">
											<i class="fa fa-microphone"></i>
											<input type="text" class="form-control input-sm" placeholder="Right icon" />
										</div>
									</div>
									<div class="form-group">
										<label>Circle Input</label>
										<div class="input-icon right">
											<i class="fa fa-microphone"></i>
											<input type="text" class="form-control input-sm input-circle" placeholder="Right icon" />
										</div>
									</div>
									<div class="form-group">
										<label>Input with Icon</label>
										<div class="input-group input-icon right">
											<span class="input-group-addon">
											<i class="fa fa-envelope"></i>
											</span>
											<i class="fa fa-exclamation tooltips" data-original-title="Invalid email." data-container="body"></i>
											<input id="email" class="input-error form-control" type="text" value="" />
										</div>
									</div>
									<div class="form-group">
										<label>disabled=""</label>
										<input type="text" class="form-control input-sm" placeholder="disabled" disabled="" />
									</div>
									<div class="form-group">
										<label>Readonly</label>
										<input type="text" class="form-control input-sm" placeholder="Readonly" readonly="" />
									</div>
									<div class="form-group">
										<label>Dropdown</label>
										<select class="form-control input-sm">
											<option>Option 1</option>
											<option>Option 2</option>
											<option>Option 3</option>
											<option>Option 4</option>
											<option>Option 5</option>
										</select>
									</div>
									<div class="form-group">
										<label>Multiple Select</label>
										<select multiple="" class="form-control input-sm">
											<option>Option 1</option>
											<option>Option 2</option>
											<option>Option 3</option>
											<option>Option 4</option>
											<option>Option 5</option>
										</select>
									</div>
									<div class="form-group">
										<label>Textarea</label>
										<textarea class="form-control input-sm" rows="3"></textarea>
									</div>
									<div class="form-group">
										<label for="exampleInputFile1">默认上传样式</label>
										<input type="file" id="exampleInputFile1" />
										<p class="help-block">
										some help text here.
										</p>
										<button type="button" class="btn btn-xs btn-primary"><i class="fa fa-upload"></i>  上传</button>
										<button type="button" class="btn btn-xs btn-white mls"><i class="fa fa-trash"></i>  删除</button>
									</div>
									<div class="form-group">
										<label for="exampleInputFile1" class="control-label">自定义上传样式</label>
										<div class="row">
											<div class="col-xs-6">
												<div class="input-icon fileuploadinput">
													<i class="fa fa-file hidden"></i>
													<input type="text" class="form-control input-sm" value="选择图片文件" readonly="readonly" />
													<p class="help-block">
													some help text here.
													</p>
												</div>
											</div>
											<div class="col-xs-6 pln">
												<a class="btn btn-sm btn-white custom-fileupload">
												<span>浏览</span>
												<input name="localImage" type="file" />
												</a>
												<button type="button" class="btn btn-sm btn-primary mls">上传</button>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label>Checkboxes</label>
										<div class="checkbox-list">
											<label><input type="checkbox" class="i-checks" /> Checkbox 1</label>
											<label><input type="checkbox" class="i-checks" /> Checkbox 2</label>
											<label><input type="checkbox" class="i-checks" checked="" disabled="" /> disabled and checked</label>
										</div>
									</div>
									<div class="form-group">
										<label>Inline Checkboxes</label>
										<div class="checkbox-list">
											<label class="checkbox-inline"><input type="checkbox" class="i-checks" /> Checkbox 1</label>
											<label class="checkbox-inline"><input type="checkbox" class="i-checks" /> Checkbox 2</label>
											<label class="checkbox-inline"><input type="checkbox" class="i-checks" disabled="" /> disabled</label>
											<label class="checkbox-inline"><input type="checkbox" class="i-checks" checked="" disabled="" /> disabled and checked</label>
										</div>
									</div>
									<div class="form-group">
										<label>Radio</label>
										<div class="radio-list">
											<label><input type="radio" class="i-checks" name="flat-radio" /> Option 1</label>
											<label><input type="radio" class="i-checks" name="flat-radio" /> Option 2 </label>
											<label><input type="radio" class="i-checks" name="flat-radio" disabled="" /> disabled</label>
											<label><input type="radio" class="i-checks" name="flat-radio" checked="" disabled="" /> disabled and checked</label>
										</div>
									</div>
									<div class="form-group">
										<label>Inline Radio</label>
										<div class="radio-list">
											<label class="radio-inline"><input type="radio" class="i-checks" name="flat-radio-2" /> Option 1 </label>
											<label class="radio-inline"><input type="radio" class="i-checks" name="flat-radio-2" /> Option 2 </label>
											<label class="radio-inline"><input type="radio" class="i-checks" name="flat-radio-2" disabled="" /> disabled </label>
											<label class="radio-inline"><input type="radio" class="i-checks" name="flat-radio-2" checked="" disabled="" /> disabled and checked </label>
										</div>
									</div>
								</div>
								<div class="form-actions">
									<button type="submit" class="btn btn-sm btn-primary">Submit</button>
									<button type="button" class="btn btn-sm btn-default">Cancel</button>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>水平表单</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content form">
							<form class="form-horizontal" role="form">
								<div class="form-body">
									<div class="form-group">
										<label class="col-md-3 control-label">Block Help</label>
										<div class="col-md-9">
											<input type="text" class="form-control input-sm" placeholder="Enter text" />
											<span class="help-block">
											A block of help text. </span>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Inline Help</label>
										<div class="col-md-9">
											<input type="text" class="form-control input-sm input-inline input-medium" placeholder="Enter text" />
											<span class="help-inline">
											Inline help. </span>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Input Group</label>
										<div class="col-md-9">
											<div class="input-inline input-medium">
												<div class="input-group">
													<span class="input-group-addon">
													<i class="fa fa-user"></i>
													</span>
													<input type="email" class="form-control input-sm" placeholder="Email Address" />
												</div>
											</div>
											<span class="help-inline">
											Inline help. </span>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Email Address</label>
										<div class="col-md-9">
											<div class="input-group">
												<span class="input-group-addon">
												<i class="fa fa-envelope"></i>
												</span>
												<input type="email" class="form-control input-sm" placeholder="Email Address" />
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Password</label>
										<div class="col-md-9">
											<div class="input-group">
												<input type="password" class="form-control input-sm" placeholder="Password" />
												<span class="input-group-addon">
												<i class="fa fa-user"></i>
												</span>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Left Icon</label>
										<div class="col-md-9">
											<div class="input-icon">
												<i class="fa fa-bell-o"></i>
												<input type="text" class="form-control input-sm" placeholder="Left icon" />
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Right Icon</label>
										<div class="col-md-9">
											<div class="input-icon right">
												<i class="fa fa-microphone"></i>
												<input type="text" class="form-control input-sm" placeholder="Right icon" />
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Icon Input in Group Input</label>
										<div class="col-md-9">
											<div class="input-group">
												<div class="input-icon">
													<i class="fa fa-lock fa-fw"></i>
													<input id="newpassword" class="form-control input-sm" type="text" name="password" placeholder="password" />
												</div>
												<span class="input-group-btn">
												<button id="genpassword" class="btn btn-success btn-sm" type="button"><i class="fa fa-arrow-left fa-fw"></i> Random</button>
												</span>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">disabled=""</label>
										<div class="col-md-9">
											<input type="password" class="form-control input-sm" placeholder="disabled" disabled="" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Readonly</label>
										<div class="col-md-9">
											<input type="password" class="form-control input-sm" placeholder="Readonly" readonly="" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Dropdown</label>
										<div class="col-md-9">
											<select class="form-control input-sm">
												<option>Option 1</option>
												<option>Option 2</option>
												<option>Option 3</option>
												<option>Option 4</option>
												<option>Option 5</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Multiple Select</label>
										<div class="col-md-9">
											<select multiple="" class="form-control input-sm">
												<option>Option 1</option>
												<option>Option 2</option>
												<option>Option 3</option>
												<option>Option 4</option>
												<option>Option 5</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Textarea</label>
										<div class="col-md-9">
											<textarea class="form-control input-sm" rows="3"></textarea>
										</div>
									</div>
									<div class="form-group">
										<label for="exampleInputFile" class="col-md-3 control-label">File input</label>
										<div class="col-md-9">
											<input type="file" id="exampleInputFile" />
											<p class="help-block">
											some help text here.
											</p>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Checkboxes</label>
										<div class="col-md-9">
											<div class="checkbox-list">
												<label><input type="checkbox" class="i-checks" /> Checkbox 1</label>
												<label><input type="checkbox" class="i-checks" /> Checkbox 2</label>
												<label><input type="checkbox" class="i-checks" checked="" disabled="" /> disabled="" and checked=""</label>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Inline Checkboxes</label>
										<div class="col-md-9">
											<div class="checkbox-list">
												<label><input type="checkbox" class="i-checks" /> Checkbox 1</label>
												<label><input type="checkbox" class="i-checks" /> Checkbox 2</label>
												<label><input type="checkbox" class="i-checks" disabled="" /> disabled</label>
												<label><input type="checkbox" class="i-checks" checked="" disabled="" /> disabled and checked</label>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Radio</label>
										<div class="col-md-9">
											<div class="radio-list">
												<label><input type="radio" class="i-checks" name="flat-radio" /> Option 1</label>
												<label><input type="radio" class="i-checks" name="flat-radio" /> Option 2 </label>
												<label><input type="radio" class="i-checks" name="flat-radio" disabled="" /> disabled </label>
												<label><input type="radio" class="i-checks" name="flat-radio" checked="" disabled="" /> disabled and checked</label>
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-3 control-label">Inline Radio</label>
										<div class="col-md-9">
											<div class="radio-list">
												<label class="radio-inline"><input type="radio" class="i-checks" name="flat-radio-2" /> Option 1 </label>
												<label class="radio-inline"><input type="radio" class="i-checks" name="flat-radio-2" /> Option 2 </label>
												<label class="radio-inline"><input type="radio" class="i-checks" name="flat-radio-2" disabled="" /> disabled  </label>
												<label class="radio-inline"><input type="radio" class="i-checks" name="flat-radio-2" checked="" disabled="" /> disabled and checked </label>
											</div>
										</div>
									</div>
								</div>
								<div class="form-actions">
									<div class="row">
										<div class="col-md-offset-3 col-md-9">
											<button type="submit" class="btn btn-sm btn-primary">Submit</button>
											<button type="button" class="btn btn-sm btn-default">Cancel</button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>栅格排版表单</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>运用<code>.col-sm-n等class</code>栅格排版表单</p>
							<div class="row">
								<div class="col-sm-2">
									<input type="text" class="form-control input-sm" placeholder="tap your text" />
								</div>
								<div class="col-sm-2">
									<select class="form-control input-sm">
										<option>Option 1</option>
										<option>Option 2</option>
										<option>Option 3</option>
										<option>Option 4</option>
										<option>Option 5</option>
									</select>
								</div>
								<div class="col-sm-3">
									<div data-toggle="buttons" class="btn-group">
										<label class="btn btn-sm btn-white">
											<input type="radio" id="option1" name="options" /> 筛选1
										</label>
										<label class="btn btn-sm btn-white active">
											<input type="radio" id="option2" name="options" /> 筛选2
										</label>
										<label class="btn btn-sm btn-white">
											<input type="radio" id="option3" name="options" /> 筛选3
										</label>
									</div>
								</div>
								<div class="col-sm-3">
									<div class="input-group">
										<input type="text" placeholder="搜索" class="input-sm form-control" />
										<span class="input-group-btn">
										<button type="button" class="btn btn-sm btn-primary">
										<i class="fa fa-search"></i>
										</button>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>表单提交后改变button内容</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<p>表单提交后改变button内容，并让button的disabled=""为true，<code>避免</code>用户重复提交产生错误</p>
							<p>在<code>costum.js</code>查看代码，注意把<code>return false</code>去掉</p>
							<form id="form-submit">
							<p>
								<button type="submit" class="btn btn-sm btn-primary">Submit</button>
								<button type="button" class="btn btn-sm btn-default">Cancel</button>
							</p>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 全局js 开始-->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap/bootstrap.min.js"></script>
		<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
		<script src="../js/custom/custom.js"></script>
		<script src="../js/plugins/pace/pace.min.js"></script>
		<!-- 全局js 结束-->
		<!-- 页面js 开始-->
		<!-- iframeResizer -->
		<!-- <script src="../js/plugins/iframeResizer/iframeResizer.contentWindow.min.js"></script> -->
		<!-- 页面js 结束-->
	</body>
</html>